﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        .yuanjiao {
            border-radius: 10px
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4IU3oIAMpZhfWZsMu7xzqBBAf6vMHcoa"></script>
    <title>单个标注点沿直线的轨迹运动</title>
</head>
<body>
        <div id="allmap"style="position:  fixed;z-index:1;"></div>
        <input id="id" class="yuanjiao" type="text" style="position: fixed;z-index:2; top:20px; height:24px;"/><button id="btn_id" class="yuanjiao"  style="position: fixed;z-index:2; top:20px;width:100px; left:160px;"onclick="chaxun()">查看运费</button>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(118.5486036385, 24.9140369857), 19);  // 初始化地图,设置中心点坐标和地图级别（越大数值实际范围越小但越详细） 

    map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
    //右键菜单
    var menu = new BMap.ContextMenu();
    var txtMenuItem = [
        {
            text: '放大',
            callback: function () { map.zoomIn() }
        },
        {
            text: '缩小',
            callback: function () { map.zoomOut() }
        }
    ];
    for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
    }
    map.addContextMenu(menu);
    map.setCurrentCity("泉州");          // 设置地图显示的城市
    map.addEventListener("click", function (e) {
        alert(e.point.lng + "," + e.point.lat);
    });//单击获取点击的经纬度

    //查询获取弹窗
    function chaxun() {
        // 创建数据库对象
        var objdbConn = new ActiveXObject("ADODB.Connection");
        // DSN字符串  
        var strdsn = "Driver={SQL Server};SERVER=127.0.0.1;UID=sa;PWD=sa;DATABASE=ELM";
        //"Driver={SQL Server};SERVER=127.0.0.1;UID=DESKTOP-LGDC4H8\\黄燕槟;PWD=\null;DATABASE=ELM";
        // 打开数据源  
        objdbConn.Open(strdsn);
        // 执行SQL的数据库查询  
        //var tiaojian = "SELECT Place_Of_Delivery, Destination FROM FormalOrder where Order_Id =" + document.getElementById("id").value;
        var objrs = objdbConn.Execute("SELECT Place_Of_Delivery, Destination FROM FormalOrder where Order_Id =" + document.getElementById("id").value);
        var qidian = objrs.Fields(0).Value;
        var zhongdian = objrs.Fields(1).Value;
        var objrss = objdbConn.Execute("SELECT Tool_used FROM RealTimeLocation where Formal_Order_Id =" + document.getElementById("id").value);
        var leixing = objrss.Fields(0).Value;
        var objrsss = objdbConn.Execute("SELECT Price FROM Price where TransportTool_Type =" + '\''+leixing+'\'');
        var jiage=objrsss.Fields(0).Value;
        //两地距离
        var output = "从" + qidian + "到" + zhongdian;
        var pay;
        var searchComplete = function (results) {
            if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
                return;
            }
            var plan = results.getPlan(0);
            output += "\n"+ "需要"+plan.getDuration(true) + "\n";                //获取时间
            output += "总路程为：";
            output += plan.getDistance(true) + "\n";             //获取距离
            var pay = parseFloat(plan.getDuration(true)) * 0.5 + parseFloat(plan.getDistance(true)) * jiage;
            output += "金额为：" + pay + "rmb"
        }
        var transit = new BMap.DrivingRoute(map, {
            renderOptions: { map: map },
            onSearchComplete: searchComplete,
            onPolylinesSet: function () {
                setTimeout(function () { alert(output) }, "1000");
            }
        });
        transit.search(qidian, zhongdian);
    }
</script>